<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>



    </style>

</head>
<body>
    <img class="icon" src="img/icon_01.png">
    <p></p>
    <button class="pre" onclick="pre()">上一张</button>
    <button class="next" onclick="next()">下一张</button>

    <script src="js/index.js">

    </script>
    <script type="text/javascript">
        //拿到所有的标签
            var icon = document.getElementsByClassName('icon')[0]
            var maxImageCount = 9
            var minImageCount = 1
            var currentImg = minImageCount


            function pre(){//点击上一张
               if(currentImg==minImageCount){
                   currentImg = maxImageCount

               }else{
                   currentImg = currentImg -1
               }
                icon.src = "img/icon_0" + currentImg + ".png"
            }
            function next(){//点击下一张

                if(currentImg==maxImageCount){
                    currentImg = minImageCount
                }else{
                    currentImg = currentImg + 1
                }
                icon.src = "img/icon_0" + currentImg + ".png"

            }


    </script>

</body>
</html>